import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
import * as api from "../api";
import allRoutes from "../router/allRoutes"; //引入所有的路由配置
import dynamicRoutes from "../router/dynamicRoutes"; //动态路由的配置
import recursionRoutes from "../utils/recursionRoutes"; //动态路由的方法
import router from "../router";

let userInfo = localStorage.getItem("qf-userInfo") || "{}";
let currentChargeProduct = localStorage.getItem("qf-currentChargeProduct") || "{}"
export default new Vuex.Store({
  state: {
    userInfo: JSON.parse(userInfo), //用户信息
    sideMenu: [], //侧边栏菜单
    breadCrumb: [], //面包屑数据
    dialogVisible: false, //控制dialog显示和隐藏的值
    dialogTitle: "增加学员信息", //控制dialog的标题
    stuData: [], // 表格的数据对象
    loading: true, // 表格加载动画控制
    currentRow: {}, //编辑的时候，dialog回显的表格数据
    stuTotal: 0, //学员信息总条目
    stuPageSize: 10, //每页展示的学员信息数
    orderData: [], //订单信息
    currentChargeProduct:JSON.parse(currentChargeProduct)//当前充值的产品
  },
  mutations: {
    //保存用户信息
    SET_USER_INFO(state, payload) {
      state.userInfo = payload;
    },
    //设置菜单
    SET_MENULIST(state, payload) {
      // state.sideMenu = payload;
      // console.log(state.sideMenu);
      //将用户路由动态的添加到router的配置routes中
      // 将用户路由添加到dynamicRoutes的"/"路径的那个配置中的children属性中
      let target = dynamicRoutes.find((item) => item.path === "/");
      // console.log(target);

      target.children = [...payload, ...target.children];
      //要将用户路由动态添加到项目中
      // console.log(dynamicRoutes);
      router.addRoutes(dynamicRoutes);
      // 核心方法就是router.addRoutes([])
      // 预支付订单页面不需要展示在菜单栏
      target.children = target.children.filter(item => item.path !== "pre_order")
      state.sideMenu = target.children;
    },
    //设置面包屑
    SET_BREADCRUMB(state, payload) {
      state.breadCrumb = payload;
    },
    //显示dialog
    SHOW_DIALOG(state) {
      state.dialogVisible = true;
    },
    //隐藏dialog
    HIDE_DIALOG(state) {
      state.dialogVisible = false;
    },
    //修改dialog标题
    CHANGE_DIALOG_TITLE(state, payload) {
      state.dialogTitle = payload;
    },
    //设置学员项目管理表格中的数据
    SET_STU_DATA(state, payload) {
      state.stuData = payload.data; //设置学员列表
      state.loading = false; //关闭加载动画
      state.stuTotal = payload.total; //设置学员信息分页总数
    },
    // 表格显示loading动画
    SHOW_LOADING(state) {
      state.loading = true;
    },
    // 表格隐藏loading动画
    HIDE_LOADING(state) {
      state.loading = false;
    },
    // 修改dialog回显数据
    SET_CURRENT_ROW(state, payload) {
      state.currentRow = {
        ...payload
      };
      // console.log(state.currentRow);
    },
    // 设置订单数据
    SET_ORDER_DATA(state, payload) {
      state.orderData = payload;
    }, 
    // 设置当前充值的产品
    SET_CURRENT_CHARGE_PRODUCT(state,payload){
      state.currentChargeProduct=[payload];
      // 再存一份到localStorage中
      localStorage.setItem('qf-currentChargeProduct',JSON.stringify([payload]))
    }
  },
  actions: {
    //获取用户菜单
    async GET_MENULIST({
      commit
    }) {
      // 用于获取服务器中当前用户的菜单
      let res = await api.getMenuListApi();
      let {
        menuList
      } = res.data;
      //使用recursionRoutes方法，计算出用户的路由，提交给mutation
      let userRoutes = recursionRoutes(menuList, allRoutes);
      commit("SET_MENULIST", userRoutes);
    },
    //获取学员列表
    GET_STULIST({
      commit
    }, payload = {}) {
      commit("SHOW_LOADING"); //打开加载动画
      let {
        page = 1, count = 10, classes = ""
      } = payload;
      api.getStuListApi(page, count, classes).then((res) => {
        commit("SET_STU_DATA", res.data);
      });
    },
    // 获取订单数据
    GET_ORDER_DATA({
      commit
    }, payload) {
      let order_id = payload || "";
      api.getOrderApi(order_id).then((res) => {
        console.log(res.data.data);
        if (res.data.state) {
          commit("SET_ORDER_DATA", res.data.data);
        } else {
          this.$message.error("获取订单失败");
        }
      });
    },
  },
  modules: {},
});